<template>
  <div>
    <c-title :hide="false" text="填写快递"></c-title>
    <div class="flex cell-group" style="flex-direction: column;" v-for="(addressItem,addressIndex) in return_address_list" :key="addressIndex">
      <div class="cell-item" style="">
        <div class="f-bold t-l">{{ addressItem.contact }} {{ addressItem.mobile }}</div>
        <div class="f-bold t-l" v-if="addressItem.plane">座机号码 {{ addressItem.plane }}</div>
        <div class="f-13 t-l">
          {{ addressItem.province_name }} {{ addressItem.city_name }} {{ addressItem.district_name }} {{ addressItem.street_name }} {{ addressItem.address }}
        </div>
        <!-- 退货商品 -->
        <div style="position: relative;">
          <div class="flex good-img" style="margin-top: 0.875rem;overflow: scroll;" >
            <img :src="goods.goods_thumb" alt="" v-for="goods in addressItem.refund_order_goods" :key="goods.id"/>
          </div>
          <div class="absolute-cell">共{{addressItem.refund_order_goods.length}}件</div>
        </div>
      </div>
      <van-cell-group>
        <van-field v-model="form[addressIndex].express_company_name" required label="快递公司" readonly placeholder="请选择快递公司" right-icon="arrow"
          @click.native="onClickCompanyShow(addressIndex)" input-align='right'/>
        <van-field v-model="form[addressIndex].express_sn" required label="快递单号" placeholder="请输入快递单号" input-align='right'/>
        <van-cell title="拍照上传快递单" style="text-align: left;" :border="false"/>
        <yz_uploader @imgFileEvent="upExpress" @input="upExpressImage($event,addressIndex)" :max_count="1" />
      </van-cell-group>
    </div>
    <div style="margin: 0 16px;">
      <van-button type="primary" size="large" block round @click="submitInfo" >提交信息</van-button>
    </div>
    <van-popup v-model="companyShow" position="bottom" :style="{ height: '80%', width: '100%' }" round >
      <van-nav-bar title="选择快递">
        <template #left>
          <span>
            <van-icon name="arrow-left" size="18" @click.native="companyShow = false" color="#333" />
          </span>
        </template>
      </van-nav-bar>
      <van-cell
        :border="false"
        is-link
        v-for="(item, i) in express"
        :key="i"
        @click.native="companyConfirm(item)"
        title-style="text-align:left"
      >
        <span slot="title">{{ item.name }}</span>
      </van-cell>
    </van-popup>
  </div>
</template>
<script>
import order_after_express_info_controller from './order_after_express_info_controller';
export default order_after_express_info_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.cell-group {
  border-radius: 8px;
  background: #FFFFFF;
  margin: 0.875rem;
  .cell-item {
    margin: 0.75rem;
    padding: 0.75rem;
    background: #FBFBFB;
    border-radius: 8px;
  }
  .good-img {
    img {
      width: 5rem;
      height: 5rem;
      border-radius: 10px;
      margin: 0 10px 0 0;
    }
  }
  .absolute-cell {
    position: absolute;
    top: -1px;
    right: 0;
    height: 5rem;
    line-height: 5rem;
    width: 70px;
    background: rgba(251,251,251,0.9);
  }
}
</style>
